<template>
    <div>
        <el-button type="primary" plain @click="handleEditor('add')">添加规格</el-button>
        <div class="table-class">
            <el-table :data="specificationList" border style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <ul>
                            <li v-for="(item, index) in JSON.parse(props.row.dataList)" :key="index">{{ item }}</li>
                        </ul>
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="ID">
                </el-table-column>
                <el-table-column prop="specificationName" label="名称">
                </el-table-column>

                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleEditor('update', scope.row.id)" type="text" size="small">编辑</el-button>
                        <el-popconfirm confirm-button-text='好的' cancel-button-text='不用了' icon="el-icon-info"
                            icon-color="red" title="这是一段内容确定删除吗？" @onConfirm="delSpecification(scope.row.id)">
                            <el-button slot="reference" type="text" size="small">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="total,prev, pager, next,sizes" :total="page.total" :page-size.sync="page.size"
                :pager-count="5" :current-page.sync="page.page" :page-sizes="[1, 10, 20, 50, 100, 500]"
                @current-change="pageChange" @prev-click="page.page--" @next-click="page.page++" @size-change="sizeChange"
                :hide-on-single-page="false">
            </el-pagination>
        </div>

        <el-dialog :title="is_update ? '规格编辑' : '添加规格'" :visible.sync="dialogFormVisible">
            <el-form :model="specificationForm">
                <el-form-item label="名称">
                    <el-input v-model="specificationForm.specificationName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="规格列表">
                    <el-input v-model="currentEditorInfo" autocomplete="off" @change="addDataList"></el-input>
                    <ul>
                        <li v-for="(item, index) in specificationForm.list" :key="index">{{ item }}<a href="javascript:;"
                                @click="removeDataList(index)" style="margin-left: 10px;color: red;">x</a></li>
                    </ul>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editorCancel">取 消</el-button>
                <el-button type="primary" @click="editorSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { specification_page, specification_query, specification_update, specification_add, specification_delete } from '@/api/dish'
import { mapGetters } from 'vuex'
export default {
    //import引入组件才能使用
    components: {},
    props: {},
    data() {
        return {
            specificationList: [],
            page: {
                page: 1,
                size: 1,
                total: 0
            },
            specificationForm: {},
            currentEditorInfo: "",
            dialogFormVisible: false,
            is_update: true,
        };
    },
    // 计算属性
    computed: {
        ...mapGetters(['shopId'])
    },
    // 监听data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        pageChange(page) {
            this.page.page = page
            this.initPage()
        },
        sizeChange(size) {
            this.page.size = size
            this.initPage()
        },
        initPage() {
            specification_page(this.page).then(res => {
                this.specificationList = res.data.list
                this.page.total = res.data.total
            })
        },
        handleEditor(type, id) {
            this.currentEditorInfo = ""
            if (type === 'update') {
                this.is_update = true
                specification_query(id).then(res => {
                    this.specificationForm = res.data
                    this.specificationForm.list = JSON.parse(this.specificationForm.dataList)
                    this.dialogFormVisible = true
                }).catch(err => {
                    this.$message.error(err)
                })
            } else {
                this.is_update = false
                this.dialogFormVisible = true
                this.specificationForm = {
                    shopId: this.shopId
                }
            }

        },
        addDataList(info) {
            this.specificationForm.list = this.specificationForm.list || []
            this.specificationForm.list.push(info)
            this.currentEditorInfo = ""
            // this.$set(this.specificationForm, 'dataList', this.specificationForm.dataList)
            this.$forceUpdate()

        },
        removeDataList(index) {
            this.specificationForm.list.splice(index, 1)
            this.$forceUpdate()
        },
        editorCancel() {
            this.dialogFormVisible = false
            this.categoryForm = {}
        },
        editorSubmit() {
            this.specificationForm.dataList = JSON.stringify(this.specificationForm.list)
            if (this.is_update) {
                specification_update(this.specificationForm).then(res => {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.initPage()
                    this.dialogFormVisible = false
                    this.specificationForm = {}
                }).catch(err => {
                    this.$message.error(err)
                })
            } else {
                specification_add(this.specificationForm).then(res => {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                    this.initPage()
                    this.dialogFormVisible = false
                    this.specificationForm = {}
                }).catch(err => {
                    this.$message.error(err)
                })
            }
        },
        delSpecification(id) {
            specification_delete(id).then(res => {
                this.$message({
                    message: '删除成功',
                    type: 'success'
                });
                this.initPage()
            }).catch(err => {
                this.$message.error(err)
            })
        }
    },
    // 生命周期，创建完成时（可以访问当前this实例）
    created() {
        this.initPage()
    },
    // 生命周期：挂载完成时（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() { },//生命周期：创建之前
    beforeMount() { },//生命周期：挂载之前
    beforeUpdate() { },//生命周期：更新之前
    updated() { },//生命周期：更新之后
    beforeDestroy() { },//生命周期：销毁之前
    destroyed() { },//生命周期：销毁完成
    activated() { },//如果页面有keep-alive缓存功能，这个函数会触发执行
}
</script>
<style scoped></style>